<template>
  <div class="my">
    <div class="info">
      <div class="avatar">
        <img :src="QINIU + 'avatar.png'" />
      </div>
      <div class="phone">{{ userInfo.username }}</div>
    </div>
    <div class="wrap">
      <div class="item">
        <div class="item-name" @click="jump('Order')">我的订单</div>
      </div>
      <div class="item">
        <div class="item-name" @click="jump('After')">售后服务</div>
      </div>
      <div class="item">
        <div class="item-name" @click="jump('Activity')">我的活动</div>
      </div>
      <div class="item">
        <div class="item-name" @click="jump('Address')">收货地址</div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      userInfo: {},
    };
  },
  created() {
    this.fetchInfo();
  },
  methods: {
    jump(name) {
      this.$router.push({ name });
    },
    fetchInfo() {
      this.$axios.get("/login/info").then((res) => {
        this.userInfo = res.data.data;
      });
    },
  },
};
</script>
 
<style scoped lang = "scss">
.my {
  padding: 0.266667rem 0.346667rem;
  padding-top: 1.673333rem;
  background-color: #efefef;
  .info {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 0.2rem;
    padding: 0.453333rem 0.72rem;
    .avatar {
      width: 1.573333rem;
      height: 1.573333rem;
      img {
        width: 100%;
      }
    }
    .phone {
      font-size: 0.426667rem;
      padding-left: 0.346667rem;
    }
  }
  .wrap {
    background-color: #fff;
    margin-top: 0.4rem;
    border-radius: 0.2rem;
    .item {
      color: #646666;
      font-size: 0.48rem;
      padding: 0.56rem;
      border-bottom: 1px solid #efefef;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        right: 0.56rem;
        top: 50%;
        background: url(http://qhps40fk6.hn-bkt.clouddn.com/forward.png);
        background-size: 100%;
        width: 0.16rem;
        height: 0.32rem;
      }
    }
  }
}
</style>